:root {
	/* https://hslpicker.com*/
	--webapp-hue: 280;
	--webapp-saturation: 100%;
	--webapp-color: var(--webapp-hue), var(--webapp-saturation);
	--webapp-background: hsl(var(--webapp-color), 98%);
	--webapp-foreground: hsl(var(--webapp-color), 10%);
	/* --webapp-convex: ; */

	--webapp-anchor: hsl(var(--webapp-color), 10%);
	--webapp-button: hsl(var(--webapp-color), 20%);
	--webapp-hover: hsl(var(--webapp-hue), 0%, 47%);
	--webapp-hint: hsl(var(--webapp-color), 15%);
	--webapp-edge: hsl(var(--webapp-color), 0%);
	
	--webapp-primary: hsl(var(--webapp-color), 30%);
	--webapp-danger: 203, 36, 49;
	--webapp-concavity: linear-gradient(-180deg, hsl(var(--webapp-color), 90%) 0%, hsl(var(--webapp-color), 80%) 90%);

	--webapp-gap: 1rem;
	--webapp-gapitem: .4rem;
	--webapp-gaplittle: .2rem;
	--webapp-gapradius: .4rem;

	--webapp-font-large: 1.4rem;
	--webapp-font-medium: 1.2rem;
	--webapp-font-normal: 1rem;
	--webapp-font-small: .8rem;

	--webapp-font-monospace: consolas, monospace;
	--webapp-font-sans-serif: verdana, georgia, arial, sans-serif;
	background: var(--webapp-background);
	color: var(--webapp-foreground);
	font: 100% var(--webapp-font-sans-serif);
}
html,body{
	margin: 0;
	padding: 0;
	height: 100%;
}
a{
	color: var(--webapp-anchor);
	text-decoration: none;
}
a.logo{
	width: 2rem;
	height: 2rem;
	background-image: url(/star/logo.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
a.arrow{
	padding: var(--webapp-gapitem) var(--webapp-gap);
}
a.arrow::before{
	content: '';
	display: block;
	width: .8rem;
	height: .8rem;
	border: .3rem solid var(--webapp-foreground);
	transform: rotate(45deg);
	border-top-width: 0;
	border-right-width: 0;
}
body>div:first-child{
	max-width: 760px;
	margin: 0 auto;
	/* width: 100%;
	border: 1px solid red;
	box-sizing: border-box; */
}
body>div:first-child>div.nav{
	margin: calc(var(--webapp-gap) * 2) 0;
	padding-bottom: calc(var(--webapp-gap) * 6);
	text-align: center;
	font-size: var(--webapp-font-small);
}

/* splashscreen */
body>div.splashscreen:first-child>header:not(:empty){
	position: fixed;
	top: var(--webapp-gap);
	right: var(--webapp-gap);
	color: var(--webapp-foreground);
	padding: var(--webapp-gapitem) var(--webapp-gap);
	font: var(--webapp-font-medium) var(--webapp-font-monospace);
	border-radius: var(--webapp-gapradius);
	background-color: rgba(0, 0, 0, .6);
	box-shadow: 0 .1rem .6rem var(--webapp-edge);
}
form>fieldset{
	border: none;
	display: flex;
	flex-direction: column;
	
}
form>fieldset>textarea{
	outline: none;
	padding: var(--webapp-gapitem);
	font-family: var(--webapp-font-sans-serif);
	font-size: var(--webapp-font-normal);
	border-radius: var(--webapp-gapradius);
}

/* login */
form.login{
	max-width: 720px;
	padding: var(--webapp-gap);
	margin: auto;
}

form.login>fieldset>button,
form.login>fieldset>label.button{

	display: block;
	text-align: center;
}
form.login>fieldset:first-child{
	flex-direction: row;
	align-items: center;
}
form.login>fieldset:first-child>img{
	width: 5rem;
	height: 5rem;
	object-fit: cover;
}
form.login>fieldset:first-child>strong{
	flex-grow: 1;
	font-size: 4rem;
	text-align: center;
	white-space: nowrap;
}
form.login>fieldset.tip{
	color: var(--webapp-hover);
	font-size: var(--webapp-font-small);
	text-align: center;
}
form.login>fieldset.tip>ul{
	margin: 0;
	line-height: var(--webapp-font-medium);
}

/* header */
header:not(:empty){
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--webapp-background);
	padding: var(--webapp-gapitem) 0;
	padding-right: var(--webapp-gapitem);
}
header>strong{
	text-align: center;
	flex-grow: 1;
}
header>strong[data-title]::before{
	content: attr(data-title);
	width: 4rem;
	height: 2rem;
	display: inline-block;
	background-image: url(/star/logo.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	white-space: nowrap;
	text-indent: 3.6rem;
	line-height: 2rem;
	margin-left: -4rem;
	font-size: var(--webapp-font-large);
}

header>input{
	outline: none;
	border: 1px solid rgba(27, 31, 35, 0.2);
	padding: 0;
	line-height: 2rem;
	font-size: var(--webapp-font-medium);
	flex-grow: 1;
	border-radius: var(--webapp-gapradius) 0 0 var(--webapp-gapradius);
	border-right: 0;
}
header>button{
	line-height: 2rem;
	padding: 0 var(--webapp-gap);
	border-radius: 0 var(--webapp-gapradius) var(--webapp-gapradius) 0;
}
header.search>input{
	text-indent: var(--webapp-gapitem);
}


/* aside */
aside.classify{
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	overflow-x: auto;
	font-weight: bold;
	background-color: var(--webapp-background);
	/* box-shadow: 0 .2rem .6rem rgb(27, 31, 35); */
}
aside.classify>a{
	position: relative;
	padding: var(--webapp-gapitem) var(--webapp-gap);
	font-size: var(--webapp-font-medium);
	white-space: nowrap;
}
aside.classify>a.selected::before{
	content: '';
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: .2rem;
	border-bottom: .2rem solid var(--webapp-anchor);
}

aside.watch{
	position: relative;
	padding-bottom: 56.25%;
	background-color: var(--webapp-edge);
}
/* landscape = viewport 处于横向，即宽度大于高度。 */
/* portrait = viewport 处于纵向，即高度大于等于宽度。 */
@media (orientation: portrait) {
	aside.watch[data-type=h]{
		position: sticky;
		top: 0;
		z-index: 9;
	}
}
aside.watch>webapp-video{
	position: absolute;
	inset: 0;
}
aside.watch>strong{
	position: absolute;
	inset: 0;
	margin: 0 var(--webapp-gap);
	display: flex;
	align-items: center;
	justify-content: center;
}
aside.watch>strong>div{
	display: flex;
	gap: var(--webapp-gapitem);
	flex-direction: column;
	text-align: center;
}


/* main */
main>blockquote{
	margin: 0;
	padding: var(--webapp-gap);
	text-align: center;
}
main.myshare{
	display: flex;
	margin: 0 var(--webapp-gap);
	gap: var(--webapp-gapitem);
	flex-direction: column;
}
main.myshare>ul{
	margin: 0;
	padding: 0;
	color: var(--webapp-hover);
	line-height: var(--webapp-font-large);
}
main.myshare>ul>li{
	list-style-type: none;
	text-indent: calc(var(--webapp-gap) * 2);
}
main.myshare>figure{
	margin: 0 auto;
	padding: var(--webapp-gap);
	background-color: var(--webapp-foreground);
	width: 18rem;
	height: 18rem;
	border-radius: var(--webapp-gapradius);
	box-shadow: 0 0 .2rem var(--webapp-edge);
}
main.myshare>figure>img{
	width: 100%;
	height: 100%;
}
main.myshare>strong{
	color: var(--webapp-hover);
	text-align: center;
	font-size: var(--webapp-font-small);
}
main.myshare>a{
	text-align: center;
	margin-top: var(--webapp-gap);
}
main.myshare>mark{
	display: flex;
	gap: var(--webapp-gapitem);
	padding: var(--webapp-gapitem) 0;
	width: 20rem;
	margin: auto;
	color: var(--webapp-foreground);
	justify-content: center;
	font-size: var(--webapp-font-large);
	font-family: var(--webapp-font-monospace);
	font-weight: bold;
	background-color: var(--webapp-button);
}
main.myshare>mark::before{
	content: attr(data-iid);
}
main.myshare>dl{
	margin: 0;
	color: var(--webapp-hover);
}

main.report{
	display: flex;
	margin: var(--webapp-gap);
	gap: var(--webapp-gap);
	flex-direction: column;
}
main.report>div.reply{
	padding: var(--webapp-gapitem);
	border-radius: var(--webapp-gapradius);
	background-color: var(--webapp-button);
}
main.report>div>time::before{
	content: attr(datetime);
	display: block;
	color: var(--webapp-hover);
	font-size: var(--webapp-font-small);
}
main.report>div>time{
	display: block;
	padding: var(--webapp-gapitem) calc(var(--webapp-gapitem) * 2);
	border-radius: var(--webapp-gapradius);
	background-color: var(--webapp-hint);
	white-space: pre-wrap;
}
main.report>div>pre{
	margin: 0;
	padding: var(--webapp-gapitem);
	font-family: var(--webapp-font-sans-serif);
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* footer */
footer{
	display: flex;
	justify-content: center;
}
footer.nav{
	box-shadow: 0 .2rem .6rem var(--webapp-edge);
	background-color: var(--webapp-background);
	background-image: var(--webapp-concavity);
}
@media (orientation: portrait) {
	footer.nav{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
	}
}
footer.nav>a{
	padding: var(--webapp-gap) 0;
	flex-grow: 1;
	text-align: center;
	color: var(--webapp-foreground);
}


/* extends */
div.titles{
	display: flex;
	justify-content: space-between;
	padding: 0 var(--webapp-gapitem);
	padding-top: var(--webapp-gap);
}
div.titles>strong{
	font-size: var(--webapp-font-large);
	font-weight: normal;
}
div.titles>a{
	padding: .2rem var(--webapp-gapitem);
	color: var(--webapp-foreground);
	background-color: var(--webapp-button);
	border-radius: var(--webapp-gapradius);
}
div.titles>select{
	outline: none;
	padding: .2rem var(--webapp-gapitem);
	border: 1px solid var(--webapp-edge);
	border-radius: var(--webapp-gapradius);
}

div[class|=grid]{
	display: grid;
	padding: var(--webapp-gapitem);
	gap: var(--webapp-gapitem);
	grid-template-columns: 1fr 1fr;
}
div[class|=grid]>a{
	display: block;
}
div[class|=grid]>a>figure{
	margin: 0;
	position: relative;
	overflow: hidden;
	color: var(--webapp-foreground);
	font-size: var(--webapp-font-small);
	background-color: var(--webapp-button);
	padding-bottom: 56.25%;
	border-radius: var(--webapp-gapradius);
	box-shadow: 0 0 .2rem var(--webapp-edge);
	text-shadow: 1px 1px 1px var(--webapp-background);
	/*h
	4:3	= 75%
	3:2	= 66.66%
	8:5	= 62.5%
	2:1	= 50%
	16:9= 56.25%
	21:9= 42.86%
	*/
	/*v
	3:4	= 133.33%
	2:3	= 150%
	5:8 = 160%
	1:2 = 200%
	9:16= 177.77%
	9:21= 233.33%
	*/
	/* https://www.fengtupic.com/tools/aspects/ */
}
div[class|=grid]>a>figure[data-label]::before{
	content: attr(data-label);
	transform: rotate(-45deg);
	position: absolute;
	top: -2.2rem;
	left: -2.2rem;
	width: 4.1rem;
	z-index: 1;
	padding-top: 3rem;
	padding-bottom: .1rem;
	background-color: var(--webapp-button);
	text-align: center;
}
div[class|=grid]>a>figure[data-require]::after{
	content: attr(data-require);
	position: absolute;
	top: 0;
	right: 0;
	padding: .2rem var(--webapp-gapitem);
	/* background-color: var(--webapp-button); */
	background-color: hsl(var(--webapp-color), 7%, .6);
	border-end-start-radius: var(--webapp-gapradius);
}
div[class|=grid]>a>figure>img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* aspect-ratio: 16 / 9; */
}
div[class|=grid]>a>figure>figcaption{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 var(--webapp-gapitem);
	white-space: nowrap;
	/* background-color: var(--webapp-button); */
	background-color: hsl(var(--webapp-color), 7%, .6);
	border-start-start-radius: var(--webapp-gapradius);
}
div[class|=grid]>a>strong{

	display: block;
	overflow: hidden;
	line-height: calc(var(--webapp-font-normal) * 1.5);
	max-height: calc(var(--webapp-font-normal) * 3);
	font-size: var(--webapp-font-small);
	font-weight: lighter;
	
	word-break: break-all;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
}
div[class|=grid]>a>div{
	position: relative;
	height: var(--webapp-font-large);
}
div[class|=grid]>a>div>mark{
	position: absolute;
	inset: 0;
	color: var(--webapp-hover);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: var(--webapp-font-large);
	font-size: var(--webapp-font-small);
	background-color: transparent;
}
div[class|=grid]>a>div>mark>span{
	padding-right: var(--webapp-gapitem);
}
div[class|=grid][class*=-t1]{
	grid-template-columns: 1fr;
}
div[class|=grid][class*=-t2]{
	grid-template-columns: 1fr 1fr;
}
div[class|=grid][class*=-t3],
div[class|=grid][class*=-t7],
div[class|=grid][class*=-t9]{
	grid-template-columns: 1fr 1fr 1fr;
}
div[class|=grid][class*=-t3]>a>figure,
div[class|=grid][class*=-t4]>a>figure{
	padding-bottom: 150%;
}
div[class|=grid][class*=-t4],
div[class|=grid][class*=-t5],
div[class|=grid][class*=-t8]{
	display: flex;
	overflow-x: auto;
	transform-origin: center;
}
div[class|=grid][class*=-t4]>a,
div[class|=grid][class*=-t5]>a,
div[class|=grid][class*=-t8]>a{
	width: 40%;
	flex-shrink: 0;
}
div[class|=grid][class*=-t5]>a{
	width: 80%;
}
div[class|=grid][class*=-t6]>a:first-child{
	grid-column: 1 / 3;
}
div[class|=grid][class*=-t7]>a>figure,
div[class|=grid][class*=-t8]>a>figure,
div[class|=grid][class*=-t9]>a:not(:first-child)>figure{
	padding-bottom: 142%;
}
div[class|=grid][class*=-t7]>a>figure>img,
div[class|=grid][class*=-t8]>a>figure>img,
div[class|=grid][class*=-t9]>a>figure>img{
	object-position: right;
}
div[class|=grid][class*=-t9]>a:first-child{
	grid-column: 1 / 4;
}
/* 
div[class|=grid][class*=-t4]>a:first-child{
	grid-column: 1 / 4;
}
div[class|=grid][class*=-t4]>a:first-child>figure{
	padding-bottom: 56.25%;
}
div[class|=grid][class*=-t4]>a:first-child>figure>img{
	object-position: unset;
}
div[class|=grid][class*=-t4],
div[class|=grid][class*=-t5]{
	grid-template-columns: 1fr 1fr 1fr;
}
div[class|=grid][class*=-t4]>a>figure,
div[class|=grid][class*=-t5]>a>figure{
	padding-bottom: 142%;
}
div[class|=grid][class*=-t4]>a>figure>img,
div[class|=grid][class*=-t5]>a>figure>img{
	object-position: right;
}
div[class|=grid][class*=-t6]{
	display: flex;
	overflow-x: auto;
	transform-origin: center;
}
div[class|=grid][class*=-t6]>a{
	width: 80%;
	flex-shrink: 0;
} */
div[class|=grid][class*=-banner]{
	gap: var(--webapp-gapitem);
	padding: var(--webapp-gapitem);
	grid-template-columns: 1fr !important;
}
div[class|=grid][class*=-banner]>a>figure{
	padding-bottom: 13%;
}


div[class|=grid][class*=-icon]{
	gap: var(--webapp-gap);
	padding: var(--webapp-gapitem);
	grid-template-columns: repeat(4, 1fr);
}
div[class|=grid][class*=-icon]>a>figure{
	padding-bottom: 100%;
}
div[class|=grid][class*=-icon]>a>strong{
	text-align: center;
}
/* @media screen and (min-width: 720px) {
	div[class|=videos]{
		grid-template-columns: 1fr 1fr 1fr;
	}
	div[class|=videos][class*=-t5]{
		grid-template-rows: 1fr;
	}
	div[class|=videos][class*=-t5]>a:first-child{
		grid-column: 1 / 4;
	}
} */
div.page{
	display: flex;
	gap: var(--webapp-gapitem);
	padding: var(--webapp-gapitem);
	justify-content: center;
	padding-bottom: calc(var(--webapp-gap) * 2);
}
div.page>a{
	padding: var(--webapp-gapitem) .6rem;
	border-radius: var(--webapp-gapradius);
}
div.page>a.selected{
	color: var(--webapp-foreground);
	background-color: var(--webapp-button);
}

/* div.float */
div.float{
	position: fixed;
	right: var(--webapp-gap);
	bottom: calc(var(--webapp-gap) * 4);
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--webapp-color), 10%, 70%);
	border-radius: var(--webapp-gapradius);
}
div.float>a{
	padding: var(--webapp-gapitem);
}

/* div.videoinfo */
div.videoinfo{
	display: flex;
	gap: var(--webapp-gap);
	flex-direction: column;
	padding: var(--webapp-gapitem);
}
/* mark.tags */
div.videoinfo>mark{
	display: flex;
	gap: var(--webapp-gap);
	flex-wrap: wrap;
	background-color: transparent;
}
div.videoinfo>mark>a{
	padding: .2rem var(--webapp-gapitem);
	color: var(--webapp-foreground);
	background-color: var(--webapp-button);
	border-radius: var(--webapp-gapradius);
}
div.videoinfo>div{
	display: flex;
	gap: var(--webapp-gapitem);
	flex-wrap: wrap;
	align-items: center;
}
div.videoinfo>div.useraction{
	gap: calc(var(--webapp-gap) * 2);
	justify-content: center;
}
div.videoinfo>div.useraction>a{
	display: flex;
	overflow: hidden;
	border: 1px solid var(--webapp-edge);
	border-radius: var(--webapp-gapradius);
	background-color: var(--webapp-hint);
	align-items: center;
}
div.videoinfo>div.useraction>a>svg{
	padding: var(--webapp-gapitem);
	background-image: var(--webapp-concavity);
}
div.videoinfo>div.useraction>a>span{
	padding: 0 var(--webapp-gapitem);
	padding-right: var(--webapp-gap);
}
div.videoinfo>div.useraction>select{
	width: 119px;
	padding: var(--webapp-gapitem);
}
div.videoinfo>mark[data-label]::before,
div.videoinfo>div[data-label]::before{
	content: attr(data-label);
	color: var(--webapp-foreground);
}
div.videoinfo>div[data-label]>a{
	overflow: hidden;
	color: var(--webapp-anchor);
	border: 1px solid var(--webapp-edge);
	padding: .2rem var(--webapp-gapitem);
	border-radius: var(--webapp-gapradius);
	background-color: var(--webapp-hint);
	white-space: nowrap;
}

div.slide{
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: black;
	color: white;
}
div.slide>header>a::before{
	border-color: white;
}
div.slide>header,
div.slide>footer{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: transparent;
}
div.slide>main{
	flex-grow: 1;
}
div.slide>main>webapp-videos{
	height: 100%;
}
div.slide>main>webapp-videos>div>webapp-video{
	display: flex;
	flex-direction: column;
}
div.slide>main>webapp-videos>div>webapp-video>video{
	height: 0;
	flex-grow: 1;
	object-fit: contain;
}
div.slide>main>webapp-videos>div>webapp-video>div.videoinfo{
	position: absolute;
	left: 0;
	right: 6rem;
	bottom: 4rem;
	display: inline-block;
	text-shadow: 1px 1px 1px var(--webapp-edge);
}
div.slide>main>webapp-videos>div>webapp-video>div.videoinfo>a{
	white-space: nowrap;
	margin-left: var(--webapp-gapitem);
}
div.slide>main>webapp-videos>div>webapp-video>div.videoinfo>strong{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.slide>main>webapp-videos>div>webapp-video>div.videoinfo>mark{
	width: 100%;
	overflow: hidden;
	flex-wrap: nowrap;
}
div.slide>main>webapp-videos>div>webapp-video>div.videoinfo>mark>a{
	white-space: nowrap;
	background-color: transparent;
	margin-left: var(--webapp-gap);
}
div.videolink{
	position: absolute;
	right: 1rem;
	bottom: 5rem;
	display: flex;
	gap: var(--webapp-gap);
	flex-direction: column;
}
div.videolink>img{
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: 1px solid var(--webapp-foreground);
	border-radius: 50%;
	margin-bottom: var(--webapp-gap);
}
div.videolink>a{
	display: flex;
	flex-direction: column;
	text-shadow: 1px 1px 1px var(--webapp-edge);
}
div.videolink>a::after{
	content: attr(data-label);
	color: var(--webapp-foreground);
}
div.slide>footer{
	position: relative;
}



/* 
div.slide,
div.slide>main>webapp-videos{
	height: 100%;
}

div.slide>main{
	height: calc(100% - 80px);
}


div.slide>header{
	padding: 0;
	color: white;
	height: 40px;
}

div.slide>footer{
	position: absolute;
	height: 40px;
	bottom: 40px;
} */





div.my>aside{
	display: flex;
	gap: var(--webapp-gap);
	padding: 0 var(--webapp-gap);
	padding-top: var(--webapp-gapitem);
	justify-content: space-between;
}
div.my>aside>img{
	width: 100px;
	height: 100px;
	padding: var(--webapp-gapitem);
	background-color: var(--webapp-foreground);
	border-radius: var(--webapp-gapradius);
}
div.my>aside>div{
	display: flex;
	gap: var(--webapp-gapitem);
	flex-direction: column;
	flex-grow: 1;
}
div.my>aside>div>a{
	display: block;
	overflow: hidden;
	color: var(--webapp-background);
	border: 1px solid var(--webapp-edge);
	line-height: 2rem;
	white-space: nowrap;
	border-radius: var(--webapp-gapradius);
	background-color: var(--webapp-foreground);
	padding-right: var(--webapp-gap);
}
div.my>aside>div>a::before{
	content: attr(data-label);
	display: inline-block;
	color: var(--webapp-foreground);
	padding-left: var(--webapp-gapitem);
	margin-right: var(--webapp-gapitem);
	background-image: var(--webapp-concavity);
}

div.my>main>ul{
	color: var(--webapp-hover);
}



/* div.my>main>ul{
	margin: 0 var(--webapp-gap);
	border-radius: var(--webapp-gapradius);
	background-color: rgb(var(--webapp-background));
	height: 30rem;
} */

div.listmenu{
	margin: var(--webapp-gap);
	padding: 1px;
	display: flex;
	flex-direction: column;
	background-color: var(--webapp-foreground);
	border-radius: var(--webapp-gapradius);
	box-shadow: 0 0 .2rem var(--webapp-button);
}
div.listmenu>a{
	color: var(--webapp-background);
	padding: var(--webapp-gap);
}
div.listmenu>a::after{
	content: attr(data-right);
	color: var(--webapp-button);
	float: right;
	font-weight: normal;
}
div.listmenu>a:not(:first-child){
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

button,.button{
	font: var(--webapp-font-medium) var(--webapp-font-sans-serif);
	color: var(--webapp-foreground);
	padding: .25rem 1rem;
	border: 1px solid rgba(27, 31, 35, 0.2);
	white-space: nowrap;
	background-color: var(--webapp-button);
	background-image: var(--webapp-concavity);
	border-radius: var(--webapp-gap);
}

dialog{
	outline: none;
	display: flex;
	border: 1px solid var(--webapp-edge);
	padding: 0;
	flex-direction: column;
	border-radius: var(--webapp-gapradius);
	box-shadow: 0 0 .2rem var(--webapp-edge);
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(.4rem);
}
dialog>strong{
	color: var(--webapp-foreground);
	padding: var(--webapp-gapitem) var(--webapp-gap);
	text-align: center;
	font-size: var(--webapp-font-medium);
	background-image: var(--webapp-concavity);
}
dialog>pre{
	margin: 0;
	padding: var(--webapp-gap);
	font-family: var(--webapp-font-sans-serif);
	white-space: pre-wrap;
	word-wrap: break-word;
}
dialog>a,
dialog>a>img{
	width: 100%;
	display: block;
}

webapp-videos>div>webapp-video>strong{
	position: absolute;
	left: 10%;
	bottom: 10%;
}
webapp-slideshows{
	box-shadow: 0 0 .2rem var(--webapp-edge);
	border-radius: var(--webapp-gapradius);
	padding-bottom: 42.86%;
	height: 0;
	margin: var(--webapp-gapitem);
}
iframe{
	z-index: 10;

}